<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>博客详情页</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/editormd.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/blogDetail.css" />
		<script src="js/jquery.min.js"></script>
		<script src="lib/marked.min.js"></script>
		<script src="lib/prettify.min.js"></script>
		<script src="lib/raphael.min.js"></script>
		<script src="lib/underscore.min.js"></script>
		<script src="lib/sequence-diagram.min.js"></script>
		<script src="lib/flowchart.min.js"></script>
		<script src="lib/jquery.flowchart.min.js"></script>
		<script src="js/editormd.js"></script>
		<script src="js/flat-ui.js"></script>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li><a href="videoMain.html">视频课程</a></li>
					<li class="active"><a href="blogMain.html">博客文章</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a th:text="${session.Account.username}" href="userInfo.html" id="username-menu">用户名</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputBlog" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索博客" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->
		<div id="row blog-container">
			<div class="col-md-8 col-md-offset-2 ">
				<h5 th:text="${blog.btitle}">博客标题</h5>
				<div class="blog-target">
					<span th:text="${blog.username}">作者</span>
					<span style="margin-left: 10px;font-size: 14px;color: #666">最后发布于</span>
					<span th:text="${#dates.format(blog.btime, 'yyyy-MM-dd')}" style="font-size: 14px;color: #666">发布时间</span>
					<span style="margin-left: 10px;font-size: 14px;">博客分类:</span>
					<span style="font-size: 14px;" th:text="${blog.btypename}">分类名称</span>
				</div>
				<div id="blog-show-editormd" class="blog-show">
					<textarea style="display:none;" name="test-editormd-markdown-doc" th:text="${blog.bcontent}"></textarea>
				</div>
				<hr>
				<div class="write-comment">
					<form method="post">
						<input type="hidden" th:value="${blog.id}" id="b_id" name="b_id">
						<input type="hidden" th:value="${session.Account.id}" id="u_id" name="u_id">
						<textarea rows="5" cols="60" maxlength="200" id="cmcontent" name="cmcontent" placeholder="说出你的感悟吧" required></textarea>
						<input class="btn btn-info" id="btn_sendComment" type="button" value="发表评论"/>
					</form>
				</div>
				<div class="blog-comment" id="blog_comment" th:fragment="blog_comment">
					<h6>评论区</h6>
					<hr>
					<ul>
						<li th:each="comments:${commentList}">
							<span th:text="${comments.username}">用户</span>
							<span th:text="${#dates.format(comments.cmtime, 'yyyy-MM-dd')}" style="font-size: 12px;font-weight: 300;color: #666">发布时间</span>
							<p th:text="${comments.cmcontent}" style="font-size: 16px;font-weight: 300;color: #666">评论内容</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var blogEditor;
			$(function() {
				blogEditor = editormd.markdownToHTML("blog-show-editormd", {
					width: "100%",
					height: "100%",
					htmlDecode: "style,script,iframe", // you can filter tags decode
					tocm: true,
					emoji: true,
					taskList: true,
					tex: true, // 默认不解析
					flowChart: true, // 默认不解析
					sequenceDiagram: true, // 默认不解析
				});

				//异步加载评论
				$('#btn_sendComment').on("click",function () {
					var url = 'addBlogComment';
					var b_id = $("#b_id").val();
					var u_id = $("#u_id").val();
					var cmcontent = $("#cmcontent").val().trim();
					console.log("cmcontent的值："+cmcontent);
					if (cmcontent == ""){
						return false;
					}
					var form_addCommnet = {
						b_id:b_id,
						u_id:u_id,
						cmcontent:cmcontent
					};
					$('#blog_comment').load(
							url,//请求路径
							form_addCommnet,//请求的数据
							function(response,status){//回调函数
								//response返回异步的HTML内容
								//status成功返回success
								if (status == "success"){
									$("#cmcontent").val("");
								}
							});

				});

			});
		</script>


	</body>

</html>
